<template>
  <div class="search-top">
    <a-row type="flex" justify="center">
      <a-col :span="6">
        <a-input placeholder="姓名查询" v-model:value="searchUserNameStr" />
      </a-col>
      <a-col :span="1"></a-col>
      <a-col :span="6">
        <a-input placeholder="手机号查询" v-model:value="searchCompanyNameStr" />
      </a-col>
      <a-col :span="1"></a-col>
      <a-col :span="1">
        <a-button type="primary" @click="search">查询</a-button>
      </a-col>
    </a-row>
  </div>
  <div class="list-table">
    <a-row type="flex" justify="center">
      <a-col :span="18">
        <a-table
          :columns="columns"
          :row-key="record => record.user_name"
          :data-source="dataSource"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange"
        ></a-table>
      </a-col>
    </a-row>
  </div>
  <div class="list-page">
    <a-row type="flex" justify="center">
      <a-col :span="18">
        <a-pagination
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          :showSizeChanger="false"
          @change="changePage"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
import axios from "axios";
import { computed, defineComponent, ref } from 'vue';
import { usePagination } from 'vue-request';
import { TableState, TableStateFilters } from 'ant-design-vue/lib/table/interface';
import ENV_URL from "../configs/httpUrl";

const queryData = (params: APIParams) => {
  return axios.get<APIResult>(`${ENV_URL}/home/user/list?${new URLSearchParams(params)}`);
};
const columns = [
  {
    title: "姓名",
    dataIndex: "user_name",
  },
  {
    title: "单位",
    dataIndex: "company_name",
  },
  {
    title: "工号",
    dataIndex: "employee_num",
  },
  {
    title: "分数",
    dataIndex: "total_point",
  },
];
type Pagination = TableState['pagination'];
type APIParams = {
  page_size: number;
  page_no?: number;
  sortField?: string;
  sortOrder?: number;
  [key: string]: any;
};
type APIResult = {
  list: {
    user_name: string;
    company_name: string;
    employee_num: string;
    total_point: string;
  }[];
};

export default defineComponent({
  setup() {
    const searchUserNameStr = ref<string>('');
    const searchCompanyNameStr = ref<string>('');
    const total = ref<number>(0);
    const { data: dataSource, run, loading, current, pageSize } = usePagination<any>(
      queryData,
      {
        defaultParams: [
          {
            page_size: 3,
          },
        ],
        formatResult: (res) => {
          total.value = res.data.data.total_num;
          return res.data.data.list;
        },
        pagination: {
          currentKey: 'page_no',
          pageSizeKey: 'page_size',
        },
      },
    );

    const pagination = computed(() => ({
      current: current.value,
      pageSize: pageSize.value,
    }));

    const changePage = (page_no) => {
      run({
        page_size: pageSize.value,
        page_no: page_no,
      });
    }

    const handleTableChange = (pag: Pagination, filters: any) => {
      run({
        page_size: pag!.pageSize!,
        page_no: pag?.current,
        ...filters,
      });
    };

    const search = () => {
      let page = pagination.value;
      page.current = 1;
      handleTableChange(page, { name: searchUserNameStr.value, phone: searchCompanyNameStr.value });
    };

    return {
      dataSource,
      pagination,
      loading,
      columns,
      searchUserNameStr,
      searchCompanyNameStr,
      search,
      handleTableChange,
      changePage,
      total,
    };
  },
});
</script>
<style lang="less">
.search-top {
  margin-bottom: 20px;
}
.list-table {
  margin-bottom: 20px;
}
</style>
